Efecto opacidad para nuestra plantilla.

Me llamó la atención Pyzam por el efecto de opacidad que con mayor o menor intensidad aplica a sus plantillas.
La forma de conseguirlo es muy sencilla, basta añadir unas líneas a las CSS de nuestra plantilla y conseguir un efecto más que vistoso.
Un ejemplo es la siguiente imagen:


¿Empezamos?
Vamos a situarnos en nuestra plantilla/edición HTML
En los códigos que doy a continuación aparece en color azul lo que más o menos encontraréis en vuestra plantilla. En color rojo lo que vamos a añadir.

Añadiremos opacidad a header, la cabecera de nuestro blog:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #135070;
background-color:#135070;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
}

Toca el turno a main. Espacio de las entradas.

#main-wrapper {
width: 410px;
float: $startSide;
border:1px solid #135070;
background-color:#135070;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Columna o sidebar:

#sidebar-wrapper {
width: 220px;
float: $endSide;
padding: 5px;
border:1px solid #135070;
background-color:#135070;
filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; -khtml-opacity:0.80;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

El resultado de estos cambios daría como resultado algo así:



Nos falta añadir la guinda del pastel que sería una imagen de fondo y lo haremos localizando body al principio los CSS.

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-color: #056cb1;
background-image: url(url-de-la-imagen);
background-attachment: fixed;
background-position: bottom left;
background-repeat: no-repeat;
border-color: #ffffff;
border-width:0px ;
border-style: solid;
}

El cambio es asombroso ¿verdad?



El resultado no es más que un ejemplo, si jugáis con los valores de la opacidad y el color de background tendréis una plantilla personalizada a vuestro gusto.

!Suerte¡